<template>
  <div class="product_page">
    <div class="product">
      <div class="product_top">
        <div class="product_left">
          <div class="img">
            <img :src="thumb" alt="" style="width: 404px; height: 404px" />
          </div>
        </div>
        <div class="product_right">
          <div class="title">
            <p>{{ abbr }}</p>
          </div>
          <div class="content">
            <div class="left">
              <span>河钢专供</span>
            </div>
            <div class="right">
              <span>{{ goodsName }}</span>
            </div>
          </div>
          <div class="product_price">
            <div class="left">
              <span>售价</span>
              <span>￥ {{ (unitPrice / 100).toFixed(2) }}</span>
            </div>
            <div class="right">
              <img
                alt=""
                src="../../../assets/mallImg/share.png"
                style="cursor: pointer"
                @click="handleShare"
              />
              <div class="line"></div>
              <div class="btn" style="cursor: pointer" @click="handleLike">
                领取优惠券
              </div>
            </div>
          </div>
          <div class="lline"></div>
          <div class="product_count">
            <div class="count_tit">数量</div>
            <div class="Inum">
              <el-input-number
                v-model="num"
                :max="stock"
                :min="1"
                label="描述文字"
                size="small"
                style="width: 180px; height: 40px"
                @change="handleChange"
              ></el-input-number>
            </div>
            <div class="stock">
              <span>库存：{{ stock }}{{ unit }}</span>
            </div>
            <div class="limit">
              <!--              <span>限购：{{ limit }}{{ unit }}</span>-->
            </div>
          </div>

          <!-- 规格 -->
          <div>
            <div class="format">
              <div v-if="this.specItemAttrList" class="count_tit">商品：</div>
              <div class="formatItems">
                <!-- 点击哪个，哪个高亮显示 -->
                <div
                  v-for="(item, index) in specItemAttrList"
                  :key="index"
                  :class="{ isDefault: active === index + 1 }"
                  class="item"
                  @click="changeOne(item, index)"
                >
                  {{ item.levelPath }}
                </div>
              </div>
            </div>
          </div>
          <el-button class="el_button" @click="handleShop">我要购买</el-button>
          <el-button class="el_button" @click="handleToShop"
          >加入购物车
          </el-button>
        </div>
      </div>
      <div class="view_list">
        <ul>
          <li @click="last">
            <img alt="" src="../../../assets/mallImg/left.png" />
          </li>
          <li
            v-for="(item, index) in imgList"
            v-show="imgList"
            :key="item.id"
            @click="hanfleView(item, index)"
          >
            <img :src="item.img" alt="" style="width: 78px; height: 78px" />
          </li>
          <li @click="next">
            <img alt="" src="../../../assets/mallImg/right.png" />
          </li>
        </ul>
      </div>
      <div
        class="handleCollectR"
        style="cursor: pointer"
        @click="handleCollect"
      >
        <i
          :class="type ? 'el-icon-star-on' : 'el-icon-star-off'"
          style="color: #ff6b03"
        ></i>
        <span style="display: inline-block; margin-top: 0"
        >收藏宝贝（人气{{ collect }}）</span
        >
      </div>
    </div>

    <!-- 店长推荐 -->
    <div class="recommend">
      <div class="recommend_title">
        <div class="img">
          <img
            alt=""
            src="../../../assets/mallImg/店长推荐.png"
            style="width: 1240px"
          />
        </div>
      </div>
      <div class="recommend_items">
        <div
          @click="handleToD(item.id)"
          v-for="item in recommendList"
          :key="item.id"
          class="recommend_item"
        >
          <img :src="item.thumb" alt="" />
          <p>¥ {{ (item.priceCurrent / 100).toFixed(2) }}</p>
        </div>
      </div>
    </div>

    <!-- 商品介绍 -->
    <div class="introduce">
      <div class="introduce_left">
        <div class="left_title">
          <img :src="mallImg" alt="" />
          <p>{{ mallName }}</p>
        </div>
        <div class="left_content">
          <p style="margin-top: 0">
            <span>联系：</span
            ><img alt="" src="../../../assets/mallImg/和我联系.png" />
          </p>
          <p>
            <span>信誉：</span>
            <el-rate
              v-model="value1"
              disabled
              score-template="{value}"
              show-score
              style="display: inline-block"
              text-color="#ff9900"
            ></el-rate>
          </p>
          <p><span>累计评价：</span>{{ evaCount }}</p>
          <p><span>销量：</span>{{ sales }}</p>
          <div class="left_btn">
            <el-button class="bu_btn" @click="handleToStore"
            >进店逛逛
            </el-button>
            <el-button class="bu_btn" @click="handleAttention"
            >{{ cType === 0 ? "关注店铺" : "取消关注" }}
            </el-button>
          </div>
        </div>
      </div>
      <div class="introduce_right">
        <div class="introduce_Rtitle">
          <span :class="{ active: isActive }" @click="isActive = true"
          >商品详细</span
          >
        </div>
        <div class="introduce_content">
          <p v-html="details"></p>
        </div>
      </div>
    </div>
    <!-- Dialog使用 -->
    <dt-dialog
      :is-loading="loading"
      :title="title"
      :visible.sync="dialogVisible"
      footerSlot
      width="400px"
    >
      <p>优惠券</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetTemp">取 消</el-button>
        <el-button @click="submitForm">领取优惠券</el-button>
      </span>
    </dt-dialog>
  </div>
</template>

<script>
// eslint-disable-next-line import/no-cycle
import {
  addCollect,
  addShopCar,
  addView,
  collectCount,
  deleteCollect,
  getMallBaseInfo,
  GoodsDetail,
  isCollect,
  mallCollect,
  recommend,
  toOrderSure
} from '@/api/mallApi/goods'
import { getShoppingcarInfo } from '@/api/mallApi/congLinMall'
import store from '@/store'

export default {
  name: 'ProductDetail',
  /* 注册组件 */
  components: {},

  /* 数据 */
  data() {
    return {
      cType: 1,
      type: 1,
      // 商品名字
      abbr: '',
      // 商品副标题
      subtitle: '',
      // 图片
      thumb: '',
      details: '',
      active: 0,
      unit: '',
      specItemAttrList: [],
      // 规格 ID
      attrId: 0,
      isActive: true,
      // 商城编码
      mallCode: '',
      goodsType: 0,
      levelPath: '',
      // 收藏人气
      collect: 0,
      // 评分
      value1: 3.5,
      /* 控制弹窗是否显示 */
      dialogVisible: false,
      isFullScreen: false,
      title: '领取优惠券',
      loading: false,
      // 单价
      Price: 0,
      // 原价
      oldPrice: 0,
      // 规格 一 价格
      onePrice: 0,
      // 数量
      num: 1,
      // 库存
      stock: 0,
      // 限购
      limit: 99,
      // 销量
      sales: 0,
      activeName: 'second',
      label: '@/assets/product_item.png',
      imgList: [
        {
          id: 1,
          url: '@/assets/itemOne.png'
        },
        {
          id: 2,
          url: '@/assets/itemTwo.png'
        },
        {
          id: 3,
          url: '@/assets/itemThree.png'
        },
        {
          id: 4,
          url: '@/assets/item.four.png'
        }
      ],
      nextId: 1,
      // 店长推荐列表
      recommendList: [],
      goodsName:'',
      mallName: '',
      // 累计评价
      evaCount: 0,
      // 店铺 logo
      mallImg: '',
      goodsId: '',
      userId: ''
    }
  },
  // 计算属性
  computed: {
    // 组合规格价格
    // 判断this.onePrice this.twoPrice不为 0，在进行计算
    unitPrice: {
      get() {
        if (this.onePrice) {
          return this.onePrice
        }
        return this.Price
      },
      set(newValue) {
        this.Price = newValue
      }
    }
  },

  /* 监听器 */
  watch: {},

  /* 初始化阶段 */
  created() {
    this.goodsId = this.goodsId ? this.goodsId : this.$route.query.id
    // 从 store中获取用户id
    this.userId = store.state.user.userId
    this.getGoodsDefault()

    this.handleCollectR()
    this.handleCollectCount()
  },
  mounted() {
    window.addEventListener('scroll', this.scrollToTop)
  },
  destroyed() {
    window.removeEventListener('scroll', this.scrollToTop)
  },
  /* 方法 */
  methods: {
    handleChange(value) {
      // TODO 当数量发生变化的时候请求接口获取库存
    },
    hanfleView(item, index) {
      this.thumb = item.img
      this.nextId = index + 1
    },
    last() {
      this.nextId--
      // 如果是第一张图片，则跳到最后一张
      if (this.nextId < 1) {
        this.nextId = 4
        this.thumb = this.imgList[this.nextId - 1].img
      } else {
        this.thumb = this.imgList[this.nextId - 1].img
      }
    },
    next() {
      this.nextId++
      if (this.nextId > 4) {
        this.nextId = 1
        this.thumb = this.imgList[this.nextId - 1].img
      } else {
        this.thumb = this.imgList[this.nextId - 1].img
      }
    },
    toTop() {
      // 滚动回到浏览器顶部
      const that = this
      const timer = setInterval(() => {
        const ispeed = Math.floor(-that.scrollTop / 5)
        // eslint-disable-next-line no-multi-assign
        document.documentElement.scrollTop = document.body.scrollTop =
          that.scrollTop + ispeed
        if (that.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 16)
    },
    scrollToTop() {
      const that = this
      const scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop
      that.scrollTop = scrollTop
      that.btnFlag = that.scrollTop > 0
    },
    // 是否收藏
    handleCollectR() {
      if (this.userId === '') return
      isCollect({
        goodsId: this.goodsId,
        userId: this.userId
      }).then((res) => {
        if (res.code === '00000') {
          this.type = res.data
        }
      })
    },
    // 点击handleCollectR/取消收藏
    handleCollect() {
      this.loop()
      if (this.type) {
        // 取消收藏
        deleteCollect({ goodsIds: [this.goodsId] })
          .then((res) => {
            // 判断是否取消成功
            if (res.code === '00000') {
              this.$message.success('取消收藏成功')
              this.handleCollectR()
              this.handleCollectCount()
            }
          })
          .catch((err) => {})
      } else {
        addCollect({
          mallCode: this.mallCode,
          goodsId: this.goodsId,
          userId: this.userId,
          type: 1
        }).then((res) => {
          if (res.code === '00000') {
            this.$message.success('收藏成功')
            this.handleCollectR()
            this.handleCollectCount()
          }
        })
      }
    },
    // 收藏人气
    handleCollectCount() {
      if (this.userId === '') return
      collectCount({ goodsId: this.goodsId })
        .then((res) => {
          if (res.code === '00000') {
            this.collect = res.data
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    loop() {
      // 判断用户登录没有，跳转到登录页面
      if (this.userId === '') {
        window.location.href = `/login?redirect=mall/product?id=${this.goodsId}`
      }
    },
    handleShop() {
      this.loop()
      if (this.specItemAttrList) {
        // 判断 onePrice 是否为 0
        if (!this.onePrice) return this.$message.error('请先选择规格')
      }
      // TODO 点击购买
      const price = this.unitPrice
      const data = {
        comeFrom: 2,
        totalAmount: price * this.num,
        list: [
          {
            mallCode: this.mallCode,
            mallName: this.mallName,
            shopcarGoods: [
              {
                id: 0,
                goodsId: this.goodsId,
                goodsName: this.goodsName,
                goodsPhoto: this.thumb,
                attrId: this.attrId,
                attrDesc: this.attrId === 0 ? '统一规格' : this.levelPath,
                price: this.oldPrice,
                priceCurrent: price,
                goodsQuantity: this.num,
                status: 1
              }
            ]
          }
        ]
      }
      toOrderSure(data).then((res) => {
        if (res.code === '00000') {
          this.$router.push({ path: '/mall/submitOrder' })
        }
      })
    },
    handleShare() {
      const copy = `${process.env.VUE_APP_TARGET}mall/product?id=${this.goodsId}`
      // 获取浏览器地址
      const url = window.location.href
      navigator.clipboard
        .writeText(url)
        .then(() => {
          this.$message.success('链接复制成功')
        })
        .catch(() => {})
    },
    // 领取优惠券
    handleLike() {
      // this.dialogVisible = true
      this.$message.error('暂无商品优惠卷')
    },
    // 提交
    submitForm() {
      // TODO 领取优惠券
      this.$message.success('领取成功')
      this.dialogVisible = false
    },
    // 关闭弹窗
    resetTemp() {
      this.$message.error('取消领取')
      this.dialogVisible.id
    },
    // 点击进店
    handleToStore() {
      this.loop()
      this.$router.push({
        path: '/mall/storeDetail',
        query: { mallCode: this.mallCode }
      })
    },
    // 点击关注
    handleAttention() {
      this.loop()
      const data = { mallCode: this.mallCode, type: this.cType === 0 ? 1 : 0 }
      mallCollect(data).then((res) => {
        if (res.code === '00000') {
          if (this.cType === 0) {
            this.$message.success('关注成功')
          } else {
            this.$message.success('取消关注成功')
          }
          // 刷新页面
          this.getGoodsDefault()
        }
      })
    },
    changeOne(item, index) {
      this.onePrice = item.price
      this.active = index + 1
      this.attrId = item.id
      this.levelPath = item.levelPath
    },
    // 获取商品详情
    getGoodsDefault() {
      GoodsDetail({ goodsId: this.goodsId }).then((res) => {
        if (res.code === '00000') {
          this.goodsName = res.data.goods.name
          this.subtitle = res.data.goods.subtitle
          this.Price = res.data.goods.priceCurrent
          this.details = res.data.goods.details
          this.thumb = res.data.goods.thumb
          this.stock = res.data.goods.stock
          this.unit = res.data.goods.unit
          this.specItemAttrList = res.data.specItemAttrList
          this.imgList = res.data.imgList
          this.mallCode = res.data.goods.mallCode
          this.goodsType = res.data.goods.goodsType
          this.oldPrice = res.data.goods.price
          // 店长推荐
          this.getRecommend()
          this.getAddView()
          // 店铺信息
          getMallBaseInfo({
            mallCode: res.data.goods.mallCode
          }).then((res) => {
            if (res.code === '00000') {
              this.mallName = res.data.mallName
              this.sales = res.data.sales
              this.evaCount = res.data.evaCount
              this.mallImg = res.data.image
              this.cType = res.data.collect
            }
          })
        }
      })
    },
    handleToShop() {
      this.loop()
      if (this.specItemAttrList) {
        // 判断 onePrice 是否为 0
        if (!this.onePrice) return this.$message.error('请先选择规格')
      }
      // 加入购物车
      addShopCar({
        id: null,
        mallCode: this.mallCode,
        memberId: 234,
        attrId: this.attrId,
        attrDesc: this.attrId === 0 ? '统一规格' : this.levelPath,
        goodsId: this.goodsId,
        goodsPhoto: this.thumb,
        goodsQuantity: this.num
      }).then((res) => {
        if (res.code === '00000') {
          this.$message.success('加入购物车成功')
          getShoppingcarInfo().then((res) => {
            this.$store.dispatch(
              'test/shopCarCount',
              res.data.shoppingcarCount
            )
          })
        }
      })
    },
    getAddView() {
      console.log('this.mallCode: ', this.mallCode)
      addView({
        goodsId: this.goodsId,
        mallCode: this.mallCode,
        userId: this.userId ? this.userId : 0
      }).then((res) => {
        if (res.code === '00000') {
          //
        }
      })
    },
    // 店长推荐
    getRecommend() {
      if (!this.mallCode) return
      recommend({
        mallCode: this.mallCode
      }).then((res) => {
        if (res.code === '00000') {
          this.recommendList = res.data
        }
      })
    },
    handleToD(goodsId) {
      this.goodsId = goodsId
      // 跳转
      this.$router.push({
        path: '/mall/product',
        query: { id: goodsId }
      })
      this.getGoodsDefault()
    }
  }
}
</script>

<style lang="scss" scoped>
.product_page {
  margin-top: 20px;
  width: 100%;
  height: 3000px;

  .float {
    position: relative;

    .packet {
      position: fixed;
      width: 110px;
      height: 110px;
      top: 279px;
      right: 20px;
    }

    .float_bt {
      position: fixed;
      top: 429px;
      right: 42px;
      width: 68px;
      height: 331px;
      margin: 0 auto;
      text-align: center;
      border-radius: 4px;
      background: #fff;
      box-shadow: 0 0 6px #0000001a;

      .tit {
        // 鼠标变成小手
        cursor: pointer;
      }

      img {
        padding: 0;
        width: 30px;
        height: 30px;
        background: transparent;
        margin-top: 12px;
      }

      p {
        padding: 0;
        margin-top: 0;
        font-weight: 400;
        font-size: 14px;
        text-align: center;
        color: #626262;
      }
    }
  }

  .product {
    margin: 0 auto;
    width: 1240px;
    // height: 546px;

    .product_top {
      display: flex;
      justify-content: space-between;

      .product_left {
        width: 404px;
        height: 404px;
        position: relative;
      }

      .product_right {
        height: 404px;
        width: 812px;

        .title {
          p {
            font-weight: 700;
            font-size: 18px;
            color: #000;
          }
        }

        .content {
          width: 416px;
          height: 32px;
          background: transparent;
          display: flex;
          justify-content: space-between;

          .left {
            width: 89px;
            height: 32px;
            border-radius: 4px;
            background: #e5f3ff;
            text-align: center;

            span {
              font-size: 16px;
              line-height: 32px;
              height: 32px;
              color: #0479db;
              display: inline-block;
              vertical-align: top;
            }
          }

          div.right {
            width: 312px;
            height: 32px;

            span {
              font-weight: 400;
              font-size: 16px;
              color: #000;
              line-height: 32px;
              height: 32px;
              width: 100%;
              display: inline-block;
              vertical-align: top;
            }
          }
        }

        .product_price {
          * {
            margin: 0;
            padding: 0;
          }

          width: 812px;
          height: 74px;
          line-height: 74px;
          border-radius: 4px;
          background: #f5f9fc;
          margin-top: 20px;
          display: flex;
          justify-content: space-between;

          .left {
            margin-left: 20px;

            span {
              height: 74px;
              display: inline-block;
            }

            span:nth-child(1) {
              vertical-align: top;
              font-size: 18px;
              color: #000;
            }

            span:nth-child(2) {
              font-size: 26px;
              color: #ff6b00;
              margin-left: 28px;
            }
          }

          .right {
            width: 204px;
            height: 32px;
            line-height: 32px;
            margin-right: 20px;
            display: flex;

            img {
              width: 28px;
              height: 28px;
              background: transparent;
              margin-top: 22px;
            }

            .line {
              width: 35px;
              height: 29px;
              // line-height: 29px;
              font-size: 20px;
              margin-top: 22px;
              border-right: 1px solid #d3d7db;
              background: #f5f9fc;
            }

            .btn {
              text-align: center;
              width: 105.4px;
              height: 32px;
              background: #be010600;
              border: 1px solid #ed742e;
              margin-top: 22px;
              margin-left: 34.6px;
              font-weight: 400;
              font-size: 14px;
              color: #ff6b00;
            }
          }
        }

        .lline {
          margin-top: 20px;
          width: 812px;
          height: 1px;
          background: #fff;
          border: 1px solid #e9e9e9;
        }

        .product_count {
          margin-top: 20px;
          width: 500px;
          height: 40px;
          line-height: 40px;
          background: transparent;
          display: flex;
          margin-bottom: 22.5px;

          .count_tit {
            font-weight: 400;
            font-size: 18px;
            text-align: left;
            color: #000;
            margin-right: 17px;
          }

          .Inum {
            margin-right: 25px;
          }

          .stock {
            font-weight: 400;
            font-size: 18px;
            text-align: left;
            color: #000;
            margin-right: 16px;
          }

          .limit {
            font-weight: 400;
            font-size: 18px;
            text-align: left;
            color: #000;
          }
        }

        .el_button {
          width: 146px;
          height: 40px;
          border-radius: 4px;
          background: #1289ff;
          font-weight: 400;
          font-size: 14px;
          color: #fff;
          margin-top: 22.5px;
        }
      }
    }

    .view_list {
      width: 404px;
      height: 78px;
      // line-height: 78px;
      margin-top: 15px;

      ul {
        height: 78px;
        padding: 0;
        list-style: none;
        margin-top: 0;
        // line-height: 78px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        li {
          cursor: pointer;
        }
      }
    }

    .handleCollectR {
      width: 200px;
      height: 24px;
      line-height: 24px;
      background: transparent;
      margin-top: 20px;
      display: flex;

      i {
        width: 24px;
        height: 24px;
        background: transparent;
        display: block;
        margin-top: 4px;
        margin-right: 8px;
      }

      span {
        display: block;
        font-weight: 400;
        font-size: 18px;
        text-align: left;
        margin-top: 4px;
        color: #000;
      }
    }

    .format {
      display: flex;
      justify-content: space-between;

      .isDefault {
        border: 1px solid #3f87f7;
      }

      .count_tit {
        margin-top: 15px;
        font-size: 18px;
        color: #000;
        margin-right: 17px;
      }

      .formatItems {
        width: 700px;
        display: flex;
        justify-content: space-between;
        // 自动换行
        flex-wrap: wrap;

        .item {
          // 元素上下间距
          margin-top: 15px;
          max-width: 200px;
          min-width: 200px;
          height: 40px;
          background-color: #f5f9fc;
          line-height: 40px;
          border-radius: 10px;
          cursor: pointer;
          color: #333;
          font-size: 16px;
          vertical-align: middle;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          display: inline-block;
          text-align: center;
        }

        .isDefault {
          border: 1px solid #f85f03;
          color: #f85f03;
        }
      }
    }

    .size {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      // 自动换行
      flex-wrap: wrap;

      .sizeItems {
        width: 740px;
        height: 40px;
        line-height: 40px;
        display: flex;
        justify-content: space-evenly;
      }

      .sizeItem {
        width: 100px;
        height: 40px;
        border: 1px solid #e9e9e9;
        line-height: 40px;
        text-align: center;
        border-radius: 4px;
        cursor: pointer;
      }

      .isDefault {
        background: #3f87f7;
      }

      .count_tit {
        font-size: 18px;
        color: #000;
        margin-right: 17px;
      }
    }
  }

  .recommend {
    width: 1240px;
    height: 315px;
    margin: 40.27px auto 0;

    .recommend_title {
      width: 1240px;
      height: 29.73px;
      background: transparent;
    }

    .recommend_items {
      width: 1240px;
      height: 261px;
      display: flex;
      justify-content: space-between;

      .recommend_item {
        margin-top: 24px;
        text-align: center;

        img {
          width: 216px;
          height: 216px;
          background: transparent;
          margin: 0;
          cursor: pointer;
        }

        p {
          padding: 0;
          font-weight: 500;
          font-size: 24px;
          color: #ff6b00;
          margin-top: 9px;
        }
      }
    }
  }

  .introduce {
    width: 1240px;
    margin: 30px auto 28px;
    display: flex;
    justify-content: space-between;

    .introduce_left {
      height: 300px;

      .left_title {
        width: 291px;
        height: 50px;
        background: #f9f9f9;
        border: 1px solid #e3e3e3;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          width: 30px;
          height: 30px;
        }

        p {
          font-weight: 500;
          font-size: 18px;
          color: #2b2b2b;
          margin-left: 10px;
        }
      }

      .left_content {
        width: 291px;
        height: 250px;
        background: #fff;
        border: 1px solid #d8d8d8;
        padding: 20px;

        p {
          font-weight: 400;
          font-size: 18px;
          text-align: left;
          color: #2b2b2b;
        }

        .left_btn {
          margin: 0 auto;
          text-align: center;

          .bu_btn {
            font-weight: 400;
            font-size: 16px;
            color: #1289ff;
            width: 115px;
            height: 40px;
            border-radius: 20px;
            background: #f7fbff;
            border: 1px solid #3f87f7;
          }
        }
      }
    }

    .introduce_right {
      width: 925px;
      height: 300px;

      .introduce_Rtitle {
        width: 925px;
        height: 49.75px;
        line-height: 49.75px;
        background: #f6f7f7;
        margin-bottom: 16px;

        span {
          width: 154px;
          height: 50px;
          display: inline-block;
          text-align: center;
          // 小手
          cursor: pointer;
        }

        .active {
          background: #2e3236;
          font-weight: 400;
          font-size: 18px;
          color: #fff;
        }
      }

      .introduce_content {
        height: 1000px;
        margin-bottom: 40px;
        //display: flex;
        //justify-content: space-between;
        img {
          width: 240px;
          height: 234px;
          background: transparent;
        }

        * {
          margin: 0;
          padding: 0;
        }

        .table {
          width: 674px;
          height: 234px;
          background: #fff;
          margin-right: -4px;

          p {
            span {
              height: 46.8px;
              line-height: 46.8px;
              display: inline-block;
              border: 1px solid #e9e9e9;
            }

            span:nth-child(1) {
              width: 224px;
              text-align: center;
            }

            span:nth-child(2) {
              width: 447px;
              padding-left: 47px;
            }
          }

          p:nth-child(2n-1) {
            width: 671px;
            height: 46px;
            background: #f6f7f7;
          }
        }
      }
    }
  }
}
</style>
